JavaScript 物件是一種用於儲存多個相關數據和功能的資料結構。物件是鍵值對的集合，鍵（屬性名）可以是字串或符號，值可以是任何資料型態，包括其他物件、函數等。物件是 JavaScript 中最重要的資料類型之一。

1. 物件的創建

1.1 使用字面量方式

let person = {
    name: 'Alice',
    age: 30,
    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

1.2 使用 new Object()

let car = new Object();
car.make = 'Toyota';
car.model = 'Corolla';

1.3 使用建構函數

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.greet = function() {
        console.log(`Hello, my name is ${this.name}`);
    };
}

let bob = new Person('Bob', 25);

2. 物件的屬性和方法

2.1 設定和獲取屬性

console.log(person.name); // 'Alice'
person.age = 31; // 更新屬性

2.2 使用 Object.keys() 和 Object.values()

• Object.keys()：返回物件的所有鍵。

let keys = Object.keys(person); // ['name', 'age', 'greet']

• Object.values()：返回物件的所有值。

let values = Object.values(person); // ['Alice', 31, ...]

3. 物件的繼承

3.1 使用原型繼承

function Animal(name) {
    this.name = name;
}

Animal.prototype.speak = function() {
    console.log(`${this.name} makes a noise.`);
};

let dog = new Animal('Dog');
dog.speak(); // 'Dog makes a noise.'

3.2 使用 class 語法

class Animal {
    constructor(name) {
        this.name = name;
    }

    speak() {
        console.log(`${this.name} makes a noise.`);
    }
}

let cat = new Animal('Cat');
cat.speak(); // 'Cat makes a noise.'

4. 物件的擴展運算符

擴展運算符可以用於快速複製和合併物件。

let additionalInfo = { gender: 'female' };
let extendedPerson = { ...person, ...additionalInfo };
// { name: 'Alice', age: 31, greet: [Function], gender: 'female' }

5. 物件的深拷貝與淺拷貝

5.1 淺拷貝

使用 Object.assign() 進行淺拷貝。

let shallowCopy = Object.assign({}, person);

5.2 深拷貝

使用 JSON.parse() 和 JSON.stringify() 進行深拷貝。

let deepCopy = JSON.parse(JSON.stringify(person));

6. 物件的不可變性

使用 Object.freeze() 使物件不可變。

let immutableObject = Object.freeze({ name: 'Alice' });
// immutableObject.name = 'Bob'; // 不會有錯誤，但無法修改

7. 物件的動態屬性

可以在運行時添加或修改屬性。

person['email'] = 'alice@example.com';

8. 存取器屬性

使用 get 和 set 定義存取器屬性。

let user = {
    firstName: 'John',
    lastName: 'Doe',
    get fullName() {
        return `${this.firstName} ${this.lastName}`;
    },
    set fullName(name) {
        [this.firstName, this.lastName] = name.split(' ');
    }
};

user.fullName = 'Jane Smith';
console.log(user.fullName); // 'Jane Smith'

9. 物件的方法綁定

使用 bind()、call() 和 apply() 改變方法的上下文。

let greet = function() {
    console.log(`Hello, my name is ${this.name}`);
};

let anotherPerson = { name: 'Alice' };
greet.call(anotherPerson); // 'Hello, my name is Alice'

10. 使用 Proxy 進行物件的監聽

Proxy 可以攔截對物件的操作，例如讀取和寫入。

let target = {};
let handler = {
    set(obj, prop, value) {
        console.log(`Setting ${prop} to ${value}`);
        obj[prop] = value;
        return true;
    }
};

let proxy = new Proxy(target, handler);
proxy.name = 'Alice'; // Setting name to Alice

11. 使用 Reflect 進行更簡單的操作

Reflect 對象提供了一組用於操作物件的靜態方法。

let obj = { name: 'Alice' };
Reflect.set(obj, 'age', 30); // 設置屬性
console.log(obj); // { name: 'Alice', age: 30 }

12. 物件的序列化與反序列化

使用 JSON.stringify() 和 JSON.parse() 來序列化和反序列化物件。

let jsonString = JSON.stringify(person);
let parsedPerson = JSON.parse(jsonString);